<template>
  <div class="Article">
    <Head msg="文章管理"></Head>
    <div class="create-btn" @click="toadd">发布</div>
    <!--    <div class="classify-main">-->
    <!--      <div :class="classify==0?'classify-active':''" @click="classifyclick(0)">审核中</div>-->
    <!--      <div :class="classify==1?'classify-active':''" @click="classifyclick(1)">已发布</div>-->
    <!--    </div>-->
    <div class="scroll-body">
      <cube-scroll
        ref="scroll"
        :data="article"
        :options="options"
        @pulling-up="listArticle"
      >
        <div class="article-main">
          <div
            class="article-list"
            v-for="(item, index) in article"
            @click="toarticledetail(item.id)"
            :key="index"
          >
            <!--          <img class="article-clear" src="../../public/img/icons/icon-clear.png" @click.stop="delArticle(item.id,index)">-->
            <img
              :src="
                item.photo
                  ? item.photo
                  : publicPath + 'img/icons/icon-article-default.png'
              "
              class="article-pic"
            />
            <div class="article-content">
              <div class="article-title">{{ item.title }}</div>
              <div class="article-information">
                <div>作者：{{ item.author }}</div>
                <div>评论：{{ item.comment }}</div>
                <div>时间：{{ item.create_time }}</div>
              </div>
              <div v-if="item.status == 1" class="article-do">
                <div
                  class="article-update"
                  @click.stop="updateArticle(item.id)"
                >
                  修改
                </div>
                <div
                  class="article-del"
                  @click.stop="delArticle(item.id, index)"
                >
                  删除
                </div>
              </div>
              <div v-if="item.status == 0" class="article-trial">审核中···</div>
            </div>
          </div>
        </div>
        <Notice msg="暂无数据" :notice="article.length"></Notice>
      </cube-scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
import Head from '@/components/Head.vue';
import Notice from '@/components/Notice.vue';

@Component({
  components: {
    Head,
    Notice,
  },
})
export default class Article extends Sence {
  private publicPath: string = process.env.BASE_URL;
  public classify: number = 0;
  public page: number = 1;
  public size: number = 10;
  public article: any = [];
  public options: object = {
    pullUpLoad: true,
  };

  public mounted(): void {
    this.listArticle();
  }

  //获取我的文章列表
  public listArticle(): void {
    this.post('api/v1/listArticle', {
      page: this.page,
      size: this.size,
      status: this.classify,
    }).then((res: any) => {
      this.article = [...this.article, ...res.data.articleList];
      this.page += 1;
      if (res.data.articleList.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  //发布文章
  public toadd(): void {
    this.post('api/v1/checkRepPoint', {}).then((res: any) => {
      (<any>this).$router.push('/articleadd');
    });
  }

  //前往文章详情
  public toarticledetail(e: number): void {
    (<any>this).$router.push(`/articledetail?id=${e}`);
  }

  // //分类切换
  // public classifyclick(data: number): void {
  //   this.classify = data;
  //   this.page = 1;
  //   this.article = [];
  //   this.options = {
  //     pullUpLoad: true
  //   };
  //   this.listArticle();
  // }

  //删除文章
  public delArticle(id: number, index: number): void {
    (<any>this)
      .$createDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '提示',
        content: '确定删除文章？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;',
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;',
        },
        onConfirm: () => {
          this.post('api/v1/delArticle', { article_id: id }).then(
            (res: any) => {
              this.toast('删除成功!');
              this.article.splice(index, 1);
            }
          );
        },
        onCancel: () => {},
      })
      .show();
  }

  //编辑文章
  public updateArticle(id: number): void {
    this.$router.push(`/articleadd?id=${id}`);
  }
}
</script>

<style scoped lang="stylus">
* {
  box-sizing: border-box;
}

.article-trial {
  color: tomato;
  text-align: left;
  font-size: 12px;
}

.article-do {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  .article-update {
    font-size: 12px;
    color: blue;
  }

  .article-look {
    margin-left: 10px;
    font-size: 12px;
    color: #0fc703;
  }

  .article-del {
    margin-left: 10px;
    font-size: 12px;
    color: red;
  }
}

.article-clear {
  width: 23px;
  height: 23px;
  position: absolute;
  top: 6px;
  right: 6px;
}

.scroll-body {
  height: calc(100vh - 40px);
}

.classify-main {
  display: flex;
  flex-direction: row;

  > div {
    box-sizing: content-box;
    width: 50vw;
    text-align: center;
    height: 37px;
    line-height: 37px;
    font-weight: bold;
    border-bottom: 3px solid #ccc;
  }

  .classify-active {
    color: #4876ff;
    border-bottom: 3px solid #4876ff;
  }
}

.Article {
  width: 100vw;
}

.create-btn {
  box-sizing: content-box;
  position: absolute;
  background: red;
  color: white;
  height: 20px;
  line-height: 22px;
  padding: 2px 10px;
  font-weight: bold;
  font-size: 14px;
  top: 10px;
  right: 20px;
  z-index: 100;
}

.article-main {
  .article-list {
    position: relative;
    margin-bottom: 5px;
    padding: 10px;
    background: #efeff4;
    display: flex;
    flex-direction: row;

    .article-pic {
      width: 24vw;
      height: 18vw;
    }

    .article-content {
      width: calc(100vw - 24vw - 20px);
      padding-left: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .article-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        line-height: 20px;
        font-weight: bold;
      }

      .article-information {
        display: flex;
        flex-direction: row;

        div {
          margin-right: 10px;
          font-size: 12px;
          color: #808080;
        }
      }
    }
  }
}
</style>
